<script src="router/index.js"></script>
<template>
  <div id="app">
    <div>
      <!--页面头部分-->
      <header>
        <h5>昆山旅游度假区产业经济平台</h5>
        <img src="@/assets/css/header/6.png" style="position: absolute;left: 0;bottom: 0"/>
        <img src="@/assets/css/header/8.png" style="position: absolute;left: 0;bottom: 0"/>
        <img src="@/assets/css/header/12.png" class="img12"/>
        <img src="@/assets/css/header/13.png" class="img13"/>
        <img src="@/assets/css/header/14.png" class="img14"/>
        <img src="@/assets/css/header/9.png" class="img9"/>
        <img src="@/assets/css/header/7.png" class="img7"/>
        <nav>
          <ul>
            <router-link @click.native="changeNav(1)" :class="{'router-left-focus':focusNav===1}" class="router" to="/home1" tag="li">
              <img src="@/assets/css/header/5.png" style="position: absolute; left: 0;top: 0"/>
              经济指标
            </router-link>
            <router-link @click.native="changeNav(2)" :class="{'router-mid-focus':focusNav===2}" class="router" to="/home5" tag="li">
              区镇情况
            </router-link>
            <router-link @click.native="changeNav(3)" class="router" :class="{'router-mid-focus':focusNav===3}" to="/home2" tag="li">
              工业指标
            </router-link>
            <router-link @click.native="changeNav(4)" class="router" :class="{'router-mid-focus':focusNav===4}" to="/home3" tag="li">
              固定资产投资
            </router-link>
            <router-link @click.native="changeNav(5)" class="router" :class="{'router-mid-focus':focusNav===5}" to="/home4" tag="li">
              <img src="@/assets/css/header/2.png" style="position: absolute; right: 10px;bottom: 0"/>
              贸易及服务行业指标
            </router-link>
            <button class="admin" @click="toAdmin"></button>
          </ul>
        </nav>
      </header>
    </div>
    <router-view/>
  </div>
</template>

<style>
@import "views/css/demo.css";
</style>

<script>
// import useStore from "@/store";
// const store = useStore()
export default {
  name: 'App',
  created () {
    this.initTime()
  },
  methods: {
    getUrlKey (name) {
      return (
          decodeURIComponent(
              (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
                  location.href
              ) || [, ''])[1].replace(/\+/g, '%20')
          ) || null
      )
    },
    toAdmin() {
      const env = window['$env'] ? window['$env'] : process.env.NODE_ENV
      const url = env === 'development' ? 'http://localhost:8080/#/ImportExcel' : 'http://180.97.199.233:28081/#/ImportExcel'
      window.open(`${url}?token=${this.getUrlKey("token")}`)
    },
    changeNav(i) {
      this.focusNav = i;
    },
    initTime() {
      this.$util.http.get(`/excel/getLatestDataTime`)
        .then(res => {
          // console.log(res)
          this.$store.year = res.data.year
          this.$store.month = res.data.month
          var time = {
            year: res.data.year,
            month: res.data.month
          }
          this.$store.time = time

          // 通知更新时间
          // console.log(`更新时间`);
          // console.log(this.bus);
        
          // console.log(this.$store);
        })
      // var date = new Date();
      // var fullYear = date.getFullYear();
      // var month = date.getMonth()+1;
      
      // // console.log(this.$store)
      // this.$store.year = fullYear
      // this.$store.month = month
      // this.$store.time = time
    }
  },
  data() {
    return {
      focusNav: 1
    }
  }
}
</script>
<style scoped>
/*头部背景*/
header {
  background: rgb(9,31,98);
}
header h5{
  margin-top: 15px;
}
.img9 {
  position: absolute;
  left: 400px;
  bottom: 0;
}
.img7 {
  position: absolute;right: 50px;bottom: 0;
  transform: translateY(5px);
}
.img12 {
  position: absolute;left: 337px;bottom: 0;
}
.img13 {
  position: absolute;left: 610px;bottom: 32px;
}
.img14 {
  position: absolute;left: 615px;bottom: 32px;
}
/*路由导航css*/
nav ul {
  transform: translate(-50px);
}
.router {
  height: 35px;
  line-height: 10px;
  margin-top: 23px;
}
.router:nth-child(1) {
  background: url("@/assets/css/header/3.png") no-repeat;
  background-size: cover;
  background-position: center;
}
.router:nth-child(2),
.router:nth-child(3),
.router:nth-child(4) {
  width: 188px;
  text-align: center;
  background: url("@/assets/css/header/10.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  margin-left: -30px;
}
.router:nth-child(5) {
  background: url("@/assets/css/header/4.png") no-repeat;
  margin-left: -30px;
}
.router:nth-child(1):hover {
  background: url("@/assets/css/header/11.png") !important;
  background-size: cover !important;
  background-position: -25px center !important;
}
.router:nth-child(2):hover,
.router:nth-child(3):hover,
.router:nth-child(4):hover {
  background: url("@/assets/css/header/11.png") !important;
  background-size: cover !important;
  background-position: center !important;
}
.router:nth-child(5):hover {
  background: url("@/assets/css/header/11.png") !important;
  background-size: cover !important;
  background-position: 0px center !important;
}
.router-left-focus {
  background: url("@/assets/css/header/11.png") !important;
  background-size: cover !important;
  background-position: -25px center !important;
}
.router-mid-focus {
  background: url("@/assets/css/header/11.png") !important;
  background-size: cover !important;
  background-position: center !important;
}

/* 右上角跳转图标 */
.admin {
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  top: 16px;
  right: -60px;
  background: url('@/assets/css/icon/home.png');
  background-size: cover;
  border: 0;
  cursor: pointer;
}
</style>